<template>
  <el-upload :limit="limit" list-type="picture-card" :auto-upload="false" ref="files" :class="{ hide: hideUpload }"
    :on-change="fileChange" :accept="accept" :file-list="fileList">
    <template #default>
      <el-icon>
        <plus />
      </el-icon>
    </template>
    <template #file="{ file }">
      <div>
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
        <span class="el-upload-list__item-actions">
          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
            <el-icon>
              <delete />
            </el-icon>
          </span>
        </span>
      </div>
    </template>
  </el-upload>
  <el-dialog v-model="dialogVisible">
    <img width="100%" :src="dialogImageUrl" alt="" />
  </el-dialog>
</template>

<script>
import { ref } from "vue";
import { Plus, ZoomIn, Download, Delete } from "@element-plus/icons-vue";
export default {
  name: "addImage",
  data() {
    return {
      dialogImageUrl: ref(""),
      dialogVisible: ref(false),
      disabled: ref(false),
      limit: 1,
      hideUpload: false,
      accept: ".jpg, .jpeg, .png",
      fileList: [],
      fileData: "",
    };
  },
  components: { Plus, ZoomIn, Download, Delete },
  mounted() {
    this.user = JSON.parse(sessionStorage.getItem('user'))
  },
  methods: {
    pushImage(obj) {
      this.fileList.push(obj);
    },
    clearImage() {
      this.$refs.files.clearFiles();
      this.fileList = []
      this.hideUpload = false;
    },
    handleRemove(file) {
      this.$refs.files.handleRemove(file);
      this.hideUpload = false;
    },
    fileChange(file, fileList) {
      console.log(file);
      console.log(123123, fileList);
      this.fileList = fileList;


      const reader = new FileReader();
      reader.onload = (e) => {
        const img = new Image();
        const timeData = new Date().getTime();

        img.src = e.target.result;
        img.onload = () => {
          const canvas = document.createElement('canvas');
          const ctx = canvas.getContext('2d');
          let compressedImage = ''
          const maxWidth = 1000; // 设置最大宽度
          const maxHeight = 800; // 设置最大高度
          let width = img.width;
          let height = img.height;
          if (width > height) {
            if (width > maxWidth) {
              height *= maxWidth / width;
              width = maxWidth;
            }
          } else {
            if (height > maxHeight) {
              width *= maxHeight / height;
              height = maxHeight;
            }
          }
          canvas.width = width;
          canvas.height = height;
          ctx.drawImage(img, 0, 0, width, height);
          canvas.toBlob((blob) => {
            console.log('blob', blob);
            const fileimg = new File([blob], `${timeData}${this.user.teacherNumber}.jpg`, { type: 'image/jpeg' })
            this.fileData = new File([blob], `${timeData}${this.user.teacherNumber}.jpg`, { type: 'image/jpeg' })
            // this.fileList.push({ 'dataUrl': img.src, 'file': fileimg })
          }, 'image/jpeg', 0.5); // 0.8 是压缩质量，可根据需要调整
        };

      };
      reader.readAsDataURL(file.raw);

      this.hideUpload = true;
    },
  },
};
</script>
<style>
.hide .el-upload--picture-card {
  display: none;
}
</style>